<template>
    <div>
        <el-drawer   v-model="drawerFlag" :show-close="false">
            <template  #header="{  titleId, titleClass }">
                <h3 :id="titleId" :class="titleClass">报文详情</h3>
                <el-icon @click="closeDrawer" class="el-icon--left"><CircleCloseFilled /></el-icon>
            </template>
            <div class="block" style="padding:10px 40px;display:flex;justify-content:space-around">
                <el-date-picker
                    v-model="dataTime"
                    type="datetimerange"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    :default-time="defaultTime"
                />
                 <el-button type="primary" style="margin-left: 20px;" @click="queryData()">查询</el-button>   
                 <el-button type="danger" style="margin-left: 20px;" @click="exports">下载</el-button>
                 <!-- <a :href="href" download="export.txt"></a>    -->
            </div>
            <div  v-loading="state.loading">
                <div style="padding:20px;">
                <div v-if="tableData" class="wrap"  :style="{background:syStore.background,color:syStore.color}">
                    <div v-for="item in arr" :key="item.id" style="padding:10px;font-size:16px">
                        <div>{{ item.times }}:{</div>
                        <div style="margin-left:100px">message:{{ item.message }}</div>
                        <!-- <div style="margin-left:150px">{{ item.message }}</div> -->
                        <div>}</div>
                    </div>
                </div>
                </div>
                <div v-if="!tableData">
                <div class="subWrap" :style="{background:syStore.background,color:syStore.color}">暂无数据</div>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script lang="ts" setup>
import { ref ,defineExpose, reactive,defineProps} from 'vue'
import { CircleCloseFilled } from '@element-plus/icons-vue'
import { rodesideApi } from '/@/api/rodeside/index';
import {saveAs} from 'file-saver';
import { systemStore } from "/@/stores/system";
const syStore = systemStore()
const rodeApi = rodesideApi();
const state = reactive({
    loading:false
})
const props = defineProps(['rsu_id'])
const drawerFlag = ref(false)
const dataForm = ref({})
const today = new Date().setHours(0,0,0,0);
const yesterday = new Date().setHours(23,59,59,0);
const dataTime = ref([today,yesterday])
// const defaultTime = ref([yesterday,today])
const openDrawer = ()=>{
    drawerFlag.value =true
}
const closeDrawer = ()=>{
    drawerFlag.value =false
}
const tableData = ref()
const arr =ref([])
const dataArr = ref([])
const queryData = (async ()=>{
    state.loading= true
    dataTime.value.forEach(item=>{
        // 将时间戳转换为秒的格式
        const date = new Date(item);
        const seconds = date.getTime() / 1000;
        dataArr.value.push(seconds);
    })
    console.log(props,"参数----")
	arr.value=[]
    dataForm.value.search = `times:${dataArr.value}:between_datetime;rsu_id:${props.rsu_id}`
    //console.log(dataForm.value)
    let res = await rodeApi.getRsmApi(dataForm.value);
    if(res.isSuccess){
        if(res.returnData.length!=0){
            tableData.value = res.returnData
            tableData.value.forEach(item=>{
                item.message = JSON.parse(item.message)
                arr.value.push({times:item.times,message:item.message})
            })
            //console.log(arr,5465465)
        }else{
            tableData.value = null
        }
        dataArr.value = []
        state.loading=false
    }

})
const urlStr = ref<string>('')
const exports = (async ()=>{
    dataTime.value.forEach(item=>{
        // 将时间戳转换为秒的格式
        const date = new Date(item);
        const seconds = date.getTime() / 1000;
        dataArr.value.push(seconds);
    })
    dataForm.value.export = 1 
    dataForm.value.search = `times:${dataArr.value}:between_datetime;rsu_id:${props.rsu_id}`
    let res = await rodeApi.getRsmApi(dataForm.value);
    if(res.isSuccess){
        urlStr.value  = res.returnData.path.substring(res.returnData.path.lastIndexOf('/')+1)
        downloadTxtFile(res.returnData.path)
    }
})

const downloadTxtFile = async (fileUrl:string) => {
  try {
    const response = await fetch(fileUrl);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const blob = await response.blob();
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = urlStr.value; // 你可以在这里指定文件名
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  } catch (error) {
    console.error('There has been a problem with your fetch operation:', error);
  }
};
defineExpose({
	openDrawer,
    queryData
});
</script>

<style scoped>
.el-icon--left{
    font-size: 24px;
}
.wrap{
    height: 100%;
    border-radius:10px
}
.subWrap{
    border-radius:10px;
    height:90vh;
    line-height:90vh;
    text-align:center;
}
</style>